<app-overview></app-overview>

<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">项目概况</div>
        <div echarts [options]="projectOverview " class="line-chart"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">应用概况</div>
        <div echarts [options]="appOverview" class="line-chart"></div>
      </div>
    </div>
  </div>
</div>

<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">CVE分值</div>
        <div echarts [options]="cveCount" class="line-chart"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">许可使用情况</div>
        <div echarts [options]="permission" class="line-chart"></div>
      </div>
    </div>
  </div>
</div>

<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">高危组件: TOP 10</div>
        <div>
          <nz-table #highRiskData [nzData]="highRiskDatas" nzShowPagination='false'>
            <thead>
              <tr>
                <th>组件名</th>
                <th>CVE</th>
                <th>等级</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of highRiskData.data">
                <td>{{data.jarName}}</td>
                <td>{{data.cveNum}}</td>
                <td>{{data.grade}}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">未经授权的组件</div>
        <div>
          <nz-table #unauthorizedData [nzData]="unauthorizedDataSet" nzShowPagination='false'>
            <thead>
              <tr>
                <th>组件名</th>
                <th>许可类型</th>
                <th>引入时间</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of unauthorizedData.data">
                <td>{{ data.jarName }}</td>
                <td>{{ data.licenseId }}</td>
                <td>{{ data.createTime | date:'yyyy-MM-dd' }}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
</div>
